<template>
    <el-main>
      <el-form ref="queryForm" :model="queryForm" label-width="80px">
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">
            <el-form-item label="交易流水">
              <el-input v-model="queryForm.orderNo"></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">
            <el-form-item label="结算金额">
              <el-input v-model="queryForm.finalAmount"></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple">
            <el-form-item label="支付金额">
              <el-input v-model="queryForm.payAmount"></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">
            <el-form-item label="业务订单">
              <el-input v-model="queryForm.businessOrderPlanNo"></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">
            <el-form-item label="交易对手">
              <el-input v-model="queryForm.tradeUser"></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple">
            <span class="demonstration">发起交易日期：</span>
            <el-date-picker
              v-model="queryForm.srarttradeDateFq"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>~
            <el-date-picker
              v-model="queryForm.endtradeDateFq"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">
            <el-form-item label="交易账户">
              <el-input v-model="queryForm.tradeAccount"></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">
            <el-form-item label="对手账号">
              <el-input v-model="queryForm.dsAccount"></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="12"><div class="grid-content bg-purple">
            <span class="demonstration">支付截止日期：</span>
            <el-date-picker
              v-model="queryForm.starttradeDateJz"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>~
            <el-date-picker
              v-model="queryForm.endtradeDateJz"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">
            <el-form-item label="交易账号">
              <el-input v-model="queryForm.tradeAccountNo"></el-input>
            </el-form-item>
          </div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">
            <el-form-item label="交易渠道">
              <el-input v-model="queryForm.tradeQudao"></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">
            <el-form-item label="交易类型">
              <el-select v-model="queryForm.tradeAccountType" placeholder="请选择交易类型">
                <el-option label="微信" value="1"></el-option>
                <el-option label="支付宝" value="2"></el-option>
                <el-option label="银行卡" value="3"></el-option>
                <el-option label="拉卡拉" value="4"></el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">
            <el-form-item label="渠道订单">
              <el-input v-model="queryForm.qudaoOrderNo"></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">
            <el-form-item label="用户类型">
              <el-select v-model="queryForm.userType" placeholder="请选择用户类型">
                <el-option label="租客个人用户" value="1"></el-option>
                <el-option label="企业商户" value="2"></el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">
            <el-form-item label="交易结果">
              <el-select v-model="queryForm.tradeResult" placeholder="请选择交易结果">
                <el-option label="处理中" value="1"></el-option>
                <el-option label="成功" value="2"></el-option>
                <el-option label="失败" value="3"></el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"><div class="grid-content bg-purple">
            <el-form-item label="支付方式">
              <el-select v-model="queryForm.payWay" placeholder="请选择支付方式">
                <el-option label="微信扫码" value="1"></el-option>
                <el-option label="支付宝扫码" value="2"></el-option>
                <el-option label="微信公众号" value="3"></el-option>
                <el-option label="认证支付" value="4"></el-option>
                <el-option label="实时代付到银行卡" value="5"></el-option>
                <el-option label="批量代付到银行卡" value="20"></el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light">
            <el-form-item label="订单金额">
              <el-input v-model="queryForm.amount"></el-input>
            </el-form-item>
          </div></el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>


      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="orderNo"
          label="交易流水号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="businessOrderPlanNo"
          label="业务订单号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="tradeAccountType"
          label="交易账户类型"
          width="180">
          <template slot-scope="scope">
          <span v-if="scope.row.tradeAccountType==1">
            微信
          </span>
            <span v-else-if="scope.row.tradeAccountType==2">
            支付宝
          </span>
            <span v-else-if="scope.row.tradeAccountType==3">
            银行卡
          </span>
            <span v-else-if="scope.row.tradeAccount==4">
            拉卡拉
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="userType"
          label="用户类型"
          width="180">
          <template slot-scope="scope">
          <span v-if="scope.row.userType==1">
            租客个人用户
          </span>
            <span v-else-if="scope.row.userType==2">
            企业商户
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="tradeAccountNo"
          label="交易账号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="tradeAccount"
          label="交易账户"
          width="180">
        </el-table-column>
        <el-table-column
          prop="payWay"
          label="支付方式"
          width="180">
          <template slot-scope="scope">
          <span v-if="scope.row.payWay==1">
            微信扫码
          </span>
            <span v-else-if="scope.row.payWay==2">
            支付宝扫码
          </span>
            <span v-if="scope.row.payWay==3">
            微信公众号
          </span>
            <span v-else-if="scope.row.payWay==4">
            认证支付
          </span>
            <span v-if="scope.row.payWay==5">
            实时代付到银行卡
          </span>
            <span v-else-if="scope.row.payWay==20">
            批量代付到银行卡
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="finalAmount"
          label="结算金额"
          width="180">
        </el-table-column>
        <el-table-column
          prop="tradeUser"
          label="交易对手"
          width="180">
        </el-table-column>
        <el-table-column
          prop="dsAccount"
          label="对手账号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="tradeQudao"
          label="交易渠道"
          width="140">
        </el-table-column>
        <el-table-column
          prop="qudaoOrderNo"
          label="渠道订单号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="tradeResult"
          label="处理结果"
          width="100">
          <template slot-scope="scope">
          <span v-if="scope.row.tradeResult==1">
            处理中
          </span>
            <span v-else-if="scope.row.tradeResult==2">
            成功
          </span>
            <span v-else-if="scope.row.tradeResult==3">
            失败
          </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="tradeDateFq"
          label="发起交易日期">
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryForm.pageNum"
        :limit.sync="queryForm.pageSize"
        @pagination="getList"
      />
    </el-main>
</template>

<script>
  import {payList} from "@/api/system/pay";
    export default {
      name: "index",
      data() {
        return {
          tableData:{},
          queryForm: {
            pageNum: 0,
            pageSize: 10,
            orderNo: undefined,
            finalAmount: undefined,
            payAmount: undefined,
            businessOrderPlanNo: undefined,
            tradeUser:undefined,
            srarttradeDateFq:undefined,
            endtradeDateFq:undefined,
            tradeAccount:undefined,
            dsAccount:undefined,
            starttradeDateJz:undefined,
            endtradeDateJz:undefined,
            tradeAccountNo:undefined,
            tradeQudao:undefined,
            tradeAccountType:undefined,
            qudaoOrderNo:undefined,
            userType:undefined,
            tradeResult:undefined,
            payWay:undefined,
            amount:undefined,
          },
          total:0,
        }
      },
      methods:{
        /** 重置按钮操作 */
        resetQuery() {
          this.queryForm={
            pageNum: 0,
            pageSize: 10,
            orderNo: undefined,
            finalAmount: undefined,
            payAmount: undefined,
            businessOrderPlanNo: undefined,
            tradeUser:undefined,
            srarttradeDateFq:undefined,
            endtradeDateFq:undefined,
            tradeAccount:undefined,
            dsAccount:undefined,
            starttradeDateJz:undefined,
            endtradeDateJz:undefined,
            tradeAccountNo:undefined,
            tradeQudao:undefined,
            tradeAccountType:undefined,
            qudaoOrderNo:undefined,
            userType:undefined,
            tradeResult:undefined,
            payWay:undefined,
            amount:undefined,
          }
          this.handleQuery();
        },
        handleQuery() {
          this.queryForm.pageNum = 1;
          this.getList();
        },
        /** 交易流水查询 */
        getList() {
          console.log(this.queryForm)
          this.loading = true;
          payList(this.queryForm).then(response => {
            this.tableData = response.data.list;
            this.total = response.data.total;
          });
        }
      },
      created() {
        this.getList();
      }
    }
</script>

<style scoped>

</style>
